<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
function newAction() {
    router.push('/iot/northbound/ali/new')
}
</script>
<template>
    <div class="white-box d-flex-1">
        <div class="gray-blk d-flex">
            <el-icon class="mr-10" size="16"><InfoFilled /></el-icon>
            将设备数据通过API的方式同步到极智物联网平台
        </div>
        <div class="my-10">
            <el-button type="primary" @click="newAction">新增</el-button>
        </div>
        <el-row :gutter="20">
            <el-col :span="6" v-for="(item, index) in 2" :key="index">
                <div class="iot-card">
                    <div class="iot-card-content">
                        <div class="img">
                            <img src="@/assets/images/aliyun.png" alt="" />
                        </div>
                        <div class="details">
                            <h4 class="title">阿里云</h4>
                            <el-row>
                                <el-col :span="12">
                                    <h5>网桥产品</h5>
                                    <p>测试</p>
                                </el-col>
                                <el-col :span="12">
                                    <h5>说明</h5>
                                    <p>测试</p>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="state success" v-if="index % 2 == 1">
                            <div class="state-content">
                                <span class="dot success mr-5"></span>
                                正常
                            </div>
                        </div>
                        <div class="state danger" v-else>
                            <div class="state-content">
                                <span class="dot danger mr-5"></span>
                                禁用
                            </div>
                        </div>
                    </div>
                    <div class="iot-card-oper">
                        <div class="card-button">
                            <el-button link type="primary">
                                <el-icon class="mr-5"><EditPen /></el-icon>
                                编辑
                            </el-button>
                        </div>
                        <div class="card-button" v-if="index % 2 == 1">
                            <el-button link type="danger">
                                <el-icon class="mr-5"><CircleClose /></el-icon>
                                禁用
                            </el-button>
                        </div>
                        <div class="card-button" v-else>
                            <el-button link type="primary">
                                <el-icon class="mr-5"><VideoPlay /></el-icon>
                                启用
                            </el-button>
                        </div>
                        <div class="card-button delete">
                            <el-button link type="warning">
                                <el-icon><Delete /></el-icon>
                            </el-button>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<style lang="less" scoped></style>
